<template>
  <div class="main">
    <div class="root">
      <div class="title"><p>上架申请</p></div>
      <div class="pass_table">
        <div class="row">
          <div class="col big_col">店铺</div>
          <div class="col big_col">商品码</div>
          <div class="col big_col">品牌</div>
          <div class="col big_col">商品名</div>
          <div class="col">库存</div>
          <div class="col">申请数量</div>
        </div>
        <div class="row" v-for="(item,index) in pass_list">
          <div class="col big_col">{{item.store.name}}</div>
          <div class="col big_col">{{item.bar_code}}</div>
          <div class="col big_col">{{item.brand}}</div>
          <div class="col big_col">{{item.commodity}}</div>
          <div class="col">{{item.stock}}</div>
          <div class="col">{{item.count}}</div>
          <div class="col"><button class="my_buttom deal_butt" @click="pass(index)">通过</button></div>

        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import passService from '../../service/apirla/pass'
  export default {
    name: 'Service',
    data () {
      return {
        pass_list: [
          // {
          //   store: {
          //     id: 1,
          //     name: '华农一店',
          //   },
          //   bar_code: '6900873024377',
          //   brand: '铁三角',
          //   commodity: '铁三角无线耳机旗舰版',
          //   stock: 20000,
          //   count: 300,
          // }
        ],
        warehouseId: 1,
      }
    },
     async mounted () {
      let user = this.$store.getters.getLoginUser
      if (user == null)alert('请登录')
      this.warehouseId = user.warehouseId
      alert("欢迎："+user.name+" 您的仓库id是"+this.warehouseId)
      // console.log("---------------Pass.vue----------------")
      // console.log(user.warehouseId)
      // console.log(this.warehouseId)
      // console.log("---------------Pass.vue----------------")
      let result = await passService.getApplies(this.warehouseId)
      console.log(result)
      this.pass_list = result.data
    },
    methods: {
      async pass(index){
          let result = await passService.passApply(this.pass_list[index],this.warehouseId)
          console.log(result)
        if (result == null){
          alert("网络错误")
        }else if (result.data == 1){
            alert("成功！")
          }else if (result.data == 2){
            alert("数据非法")
          }else if (result.data == 3){
            alert("库存不足")
          }
          // 更新页面
        let result1 = await passService.getApplies(this.warehouseId)
        this.pass_list = result1.data
      }
    }
  }
</script>
<style>
  .main{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .root{
    height: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .title{
    margin-top: 30px;
    width: 200px;
    height: 40px;
    font-size: 30px;
    font-weight: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pass_table {
    margin-top: 30px;
  }
  .row{
    display: flex;
    margin-top: 15px;
  }
  .col{
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
  }
  .big_col{
    width: 170px;
  }
  .my_buttom {
    width: 70px;/*设置按钮宽度*/
    height: 35px;/*设置按钮高度*/
    color:white;/*字体颜色*/
    background-color:cornflowerblue;/*按钮背景颜色*/
    border-radius: 3px;/*让按钮变得圆滑一点*/
    border-width: 0;/*消去按钮丑的边框*/
    margin: 0;
    outline: none;/*取消轮廓*/
    font-family: KaiTi;/*字体设置为楷体*/
    font-size: 17px;/*设置字体大小*/
    text-align: center;/*字体居中*/
    cursor: pointer;/*设置鼠标箭头手势*/
  }
  .deal_butt{
    width: 50px;
    height: 20px;
  }
</style>
